<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="/static/wode/return.png" mode=""></image>

			</view>
			<view class="head_mid">
				筛选
			</view>
			<view class="head_right"></view>
		</view>
		<view v-show="showCountry" class="padding-box">
			<view class="meetFilter-item-h2">
				<text class="lf" id="country">国家</text>
				<view class="rf" @tap="moreCountry">
					更多
					<image v-if="isAddFriendPage" src="/static/filter/more.png"></image>
					<image v-else src="/static/filter/more.png"></image>
				</view>
				<view class="clear"></view>
			</view>
			<view class="item-box">
				<view class="leibie-item" @tap="selectAll()" :class="{countryitem :allCountry==true}">
					不限
				</view>
				<view class="leibie-item countryitem" v-for="(item,index) in countries" :key="index">
					<view class="text-box" :class="{countryitem2 :allCountry==true}">
						{{item}}
					</view>
					<image src="/static/wode/rightdel.png" mode="" @tap="delcountry(index)"></image>
				</view>
			</view>
		</view>
		<view v-show="type=='交友拍拖'">
			<view class="meetFilter-item-h2">
				<text class="lf">性别</text>
				<view class="clear"></view>
			</view>
			<view class="meetFilter-sex">
				<view @tap="selectSex('man')" :class="{active:manSelected===true}" class="item man">
					<!-- <image v-if="isAddFriendPage" class="manImg" :src="manImg1"></image>
					<image v-else class="manImg" :src="manImg"></image> -->
					 男
				</view>
				<view @tap="selectSex('woman')" :class="{active:womanSelected===true}" class="item woman">
					<!-- <image v-if="isAddFriendPage" class="womanImg" :src="womanImg1"></image>
					<image v-else class="womanImg" :src="womanImg"></image> -->
					 女
				</view>
				<view @tap="selectSex('')" :class="{active:(manSelected===false && womanSelected===false)}" class="item">
					不限
				</view>
			</view>
		</view>
		<view v-show="type=='交友拍拖'">
			<view class="meetFilter-item-h2">
				<text class="lf">年龄</text>
				<text class="rf">{{minVal}}-{{maxVal}}</text>
				<view class="clear"></view>
			</view>
			<view class="meetFilter-age">
				<view class="meetFilter-age-main">
					<filterage :backgroundColor="backgroundColor" :fontColor="fontColor" @getMinVal="getMinVal" @getMaxVal="getMaxVal"
					 :minVal="minVal" :maxVal="maxVal" :showMinVal="showMinVal" :showMaxVal="showMaxVal"></filterage>
				</view>
			</view>
		</view>
		<view v-show="type=='交友拍拖'">
			<view class="meetFilter-item-h2">
				<text class="lf">身份</text>
				<view class="clear"></view>
			</view>
			<view class="item-box">
				<view class="leibie-item" @tap="selectReal(index)" :class="{active2:item.select==true}" v-text="item.text" v-for="(item,index) in shenfen"
				 :key="index"></view>
			</view>
		</view>
		<view class="" v-show="type=='商业互助'">
			<view class="meetFilter-item-h2">
				<text class="lf">类别</text>
				<view class="clear"></view>
			</view>
			<view class="item-box">
				<view class="leibie-item" v-for="(item,index) in shanye" :key="index" :class="{active2:item.select==true}" @tap="selectType(index)">
					{{item.text}}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import filterage from '../../../components/filterage'
	export default {
		components: {
			filterage
		},
		data() {
			return {
				type: '',
				shenfen: [{
					text: '留学生',
					select: false
				}, {
					text: '华侨',
					select: false
				}, {
					text: '华裔',
					select: false
				}, {
					text: '境外工作',
					select: false
				}, {
					text: '境外商人',
					select: false
				}, {
					text: '不限',
					select: false
				}],
				shanye: [{
					text: '贸易',
					select: false
				}, {
					text: '跑腿代购',
					select: false
				}, {
					text: '招聘',
					select: false
				}, {
					text: '求职',
					select: false
				}, {
					text: '捐助',
					select: false
				}, {
					text: '投资',
					select: false
				}, {
					text: '不限',
					select: false
				}],
				allCountry: false,
				showCountry: true,
				showRelation: false,
				// showSort: false,
				showSex: true,
				showAge: true,
				showPreference: true,
				showReal: true,

				backgroundColor: '#94DEDD',
				fontColor: false,

				selectedCountry: -1,
				selectedReal: '',
				womanSelected: false,
				womanImg: '/static/filter/woman_unselect.png',
				womanImg1: '/static/filter/woman_unselect.png',
				manSelected: false,
				manImg: '/static/filter/man_unselect.png',
				manImg1: '/static/filter/man_unselect.png',
				minAge: '18',
				maxAge: '50',

				age_start: '1969-01-01',
				age_end: '2001-01-01',
				minVal: 18,
				maxVal: 50,
				showMinVal: 18,
				showMaxVal: 50,
				countries: [],
			}
		},
		onLoad(option) {
			if (option.type != undefined) {
				this.type = option.type;
				console.log(this.type)
			}
		},
		onShow() {
			if (this.type == '交友拍拖') {
				var countryNotClear = uni.getStorageSync('jiaoyoucountryNotClear');
				var shenfenArr = uni.getStorageSync('shenfenArr')
				this.minVal=uni.getStorageSync('minVal')
				this.maxVal=uni.getStorageSync('maxVal')
				var sex=uni.getStorageSync('jiaoyouSex')
				this.isAddFriendPage
				if (sex === '女') {
					this.womanSelected = true;
					this.manSelected = false;
					this.womanImg1 = "/static/filter/woman_selected.png";
					this.manImg1 = "/static/filter/man_unselect.png";
				}
				if (sex === '男') {
					this.womanSelected = false;
					this.manSelected = true;
					this.womanImg1 = "/static/filter/woman_unselect.png";
					this.manImg1 = "/static/filter/man_selected.png";
				}
				if (sex === '不限') {
					this.womanSelected = false;
					this.manSelected = false;
					this.womanImg1 = "/static/filter/woman_unselect.png";
					this.manImg1 = "/static/filter/man_unselect.png";
				}
			} else if (this.type == '境外旅游') {
				var countryNotClear = uni.getStorageSync('luyoucountryNotClear');
			} else if (this.type = '商业互助') {
				var countryNotClear = uni.getStorageSync('shangyecountryNotClear');
				var shenfenArr = uni.getStorageSync('shangyeArr')
			}
			if (countryNotClear != '') {
				this.countries = countryNotClear;
				console.log(this.countries)
				if (this.selectedCountry == -1) {
					this.selectedCountry = 0;
				}
			}
			if (shenfenArr != '') {
				for (var i = 0; i < shenfenArr.length; i++) {
					if (this.type == '交友拍拖') {
						for (var j = 0; j < this.shenfen.length; j++) {
							if (shenfenArr[i] == this.shenfen[j].text) {
								this.shenfen[j].select = true
							}
						}
					} else if (this.type == '商业互助') {
						for (var j = 0; j < this.shanye.length; j++) {
							if (shenfenArr[i] == this.shanye[j].text) {
								this.shanye[j].select = true
							}
						}
					}
				}
			}
		},
		methods: {
			moreCountry() {
				uni.navigateTo({
					url: '/pages/Other/countrySelect/countrySelect?type=' + this.type
				})
			},
			back() {
				if (this.type == '商业互助') {
					var shanyeArr = [];
					for (var i = 0; i < this.shanye.length; i++) {
						if (this.shanye[i].select == true) {
							shanyeArr.push(this.shanye[i].text)
						}
					}
					if (this.allCountry == true) {
						uni.removeStorageSync('shangyecountryNotClear')
						uni.setStorageSync('shangyecountryNotClear',['不限'])
					}
					console.log(shanyeArr)
					uni.setStorageSync('shangyeArr', shanyeArr)
				} else if (this.type == '交友拍拖') {
					var shenfenArr = []; //身份数组
					var sex = ''; //性别
					for (var i = 0; i < this.shenfen.length; i++) {
						if (this.shenfen[i].select == true) {
							shenfenArr.push(this.shenfen[i].text)
						}
					}
					if (this.allCountry == true) {
						uni.removeStorageSync('jiaoyoucountryNotClear')
						uni.setStorageSync('jiaoyoucountryNotClear',['不限'])
					}
					if (this.womanSelected) {
						sex = '女';//2
					} else if (this.manSelected) {
						sex = "男"//1
					} else {
						sex = "不限"//0
					}
					uni.setStorageSync('jiaoyoumax', this.maxVal)
					uni.setStorageSync('jiaoyoumin', this.minVal)
					uni.setStorageSync('shenfenArr', shenfenArr)
					uni.setStorageSync('jiaoyouSex', sex)
				}

				uni.navigateBack({
					delta: 1
				})
			},
			selectType(index) {
				if (this.shanye[index].select == true) {
					this.shanye[index].select = false
				} else {
					if(this.shanye[index].text=='不限'){
						for(var i=0;i<this.shanye.length;i++){
							this.shanye[i].select=false
						}
					}
					this.shanye[index].select = true
				}
			},
			selectReal(index) {
				if (this.shenfen[index].select == true) {
					this.shenfen[index].select = false
				} else {
					if(this.shenfen[index].text=='不限'){
						for(var i=0;i<this.shenfen.length;i++){
							this.shenfen[i].select=false
						}
					}
					this.shenfen[index].select = true
				}
			},
			getMinVal(v) {
				this.minVal = v.detail.value;
				this.slideBeyond();
			},
			getMaxVal(v) {
				this.maxVal = v.detail.value;
				this.slideBeyond();
			},
			slideBeyond() { //选年龄

				if (this.minVal > this.maxVal) {
					this.showMinVal = this.maxVal;
					this.showMaxVal = this.minVal;

					var date = new Date;
					var year = date.getFullYear();
					var maxAge = year - parseInt(this.showMinVal);
					var minAge = year - parseInt(this.showMaxVal);
					this.age_start = minAge + "-01-01";
					this.age_end = maxAge + "-01-01";
				} else {
					this.showMinVal = this.minVal;
					this.showMaxVal = this.maxVal;

					var date = new Date;
					var year = date.getFullYear();
					var maxAge = year - parseInt(this.showMinVal);
					var minAge = year - parseInt(this.showMaxVal);
					this.age_start = minAge + "-01-01";
					this.age_end = maxAge + "-01-01";
				}
			},
			selectSex: function(type) { //选性别
				if (this.isAddFriendPage) {
					if (type === 'woman') {
						this.womanSelected = true;
						this.manSelected = false;
						this.womanImg1 = "/static/filter/woman_selected.png";
						this.manImg1 = "/static/filter/man_unselect.png";
					}
					if (type === 'man') {
						this.womanSelected = false;
						this.manSelected = true;
						this.womanImg1 = "/static/filter/woman_unselect.png";
						this.manImg1 = "/static/filter/man_selected.png";
					}
					if (type === '') {
						this.womanSelected = false;
						this.manSelected = false;
						this.womanImg1 = "/static/filter/woman_unselect.png";
						this.manImg1 = "/static/filter/man_unselect.png";
					}
				} else {
					if (type === 'woman') {
						this.womanSelected = true;
						this.manSelected = false;
						this.womanImg = "/static/filter/woman_selected.png";
						this.manImg = "/static/filter/man_unselect.png";
					}
					if (type === 'man') {
						this.womanSelected = false;
						this.manSelected = true;
						this.womanImg = "/static/filter/woman_unselect.png";
						this.manImg = "/static/filter/man_selected.png";
					}
					if (type === '') {
						this.womanSelected = false;
						this.manSelected = false;
						this.womanImg = "/static/filter/woman_unselect.png";
						this.manImg = "/static/filter/man_unselect.png";
					}
				}
			},
			delcountry(index) {
				this.countries.splice(index, 1)
				if (this.type == '交友拍拖') {
					uni.setStorageSync('jiaoyoucountryNotClear', this.countries);
					if(this.countries.length==0){
						uni.removeStorageSync('jiaoyoucountryNotClear')
					}
				} else if (this.type == '境外旅游') {
					uni.setStorageSync('luyoucountryNotClear', this.countries);
					if(this.countries.length==0){
						uni.removeStorageSync('luyoucountryNotClear')
					}
				} else if (this.type = '商业互助') {
					uni.setStorageSync('shangyecountryNotClear', this.countries);
					if(this.countries.length==0){
						uni.removeStorageSync('shangyecountryNotClear')
					}
				}
			},
			selectAll() {
				if (this.allCountry == false) {
					this.allCountry = true
				} else {
					this.allCountry = false
				}
			}
		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		height: 162upx;
		position: fixed;
		top: 0;
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
		box-sizing: border-box;
		z-index: 9999;
	}

	.head_left image {
		height: 36upx;
		width: 20upx;
		margin-right: 9upx;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
		padding-top: 70upx;
	}

	.head_mid {
		font-size: 36upx;
		color: #333333;
		padding-top: 90upx;
	}

	.head_right {
		width: 30upx;

	}

	.padding-box {
		padding-top: 88upx;
	}

	.lf {
		float: left;
	}

	.rf {
		float: right;
	}

	.clear {
		clear: both;
	}

	.meetFilter-item-h2 {
		margin-top: 90upx;
		line-height: 80upx;
		padding-left: 50upx;
		padding-right: 40upx;
		background: #fff;
		color: #000;
		border-radius: 0;
	}

	.meetFilter-item-h2 text {
		font-size: 30upx;
	}

	.meetFilter-item-h2 .rf {
		color: #91909E;
		font-size: 24upx;
	}

	.meetFilter-item-h2 .rf image {
		height: 22upx;
		width: 14upx;
		top: 3upx;
		position: relative;
		margin-left: 10upx;
	}

	.meetFilter-countries {
		padding-top: 30upx;
		padding-bottom: 30upx;
		color: #fff;
		font-size: 30upx;
		overflow: hidden;
		padding: 20upx 60upx;
	}

	.meetFilter-countries>view {
		width: 150upx;
		line-height: 80upx;
		border: 1upx solid #fff;
		text-align: center;
		border-radius: 6upx;
		margin-right: 25upx;
		margin-bottom: 30upx;
		border-color: #33CBCC;
		color: #33CBCC;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.meetFilter-countries>view:nth-child(3n) {
		margin-right: 0;
	}

	.meetFilter-countries>view.active {
		border: 1upx solid transparent;
		color: #fff;
		background: #33CBCC;
	}

	.meetFilter-sex {
		padding: 50upx;
		display: flex;
		font-size: 30upx;
		padding-top: 30upx;
		padding-bottom: 30upx;
	}

	.meetFilter-sex .item {
		width: 150upx;
		height: 66upx;
		border: 1upx solid #fff;
		border-radius: 33upx;
		display: flex;
		justify-content: center;
		border-color: #33CBCC;
		color: #33CBCC;
		align-items: center;
		margin-right: 40upx;
	}

	.meetFilter-sex .item.active {
		color: #fff;
		background: #33CBCC;
		border: 1upx solid transparent;
		border-color: #33CBCC;
	}

	.meetFilter-sex image {
		margin-right: 20upx;
	}

	.meetFilter-sex .manImg {
		width: 30upx;
		height: 38upx;
	}

	.meetFilter-sex .womanImg {
		width: 27upx;
		height: 38upx;
	}

	.meetFilter-confirm {
		text-align: center;
		margin-top: 80upx;
		background: #FFFFFF;
		width: 100%;
		height: 120upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.meetFilter-confirm button {
		width: 280upx;
		height: 80upx;
		font-size: 30upx;
		border-color: #33CBCC;
		color: #FFFFFF;
		background: #46CECF;
	}

	.meetFilter-confirm .replay {
		color: #333333;
		background: #E6E6E6;
	}

	.content {
		position: fixed;
		right: 0;
		top: 0;
		width: 85%;
		z-index: 1999;
		height: 100%;
		overflow-y: scroll;
		background: rgb(243, 243, 243);
	}

	.preference-main {
		position: relative;
	}

	.openImg {
		position: absolute;
		top: 30upx;
		right: 20upx;
		width: 39upx;
		height: 39upx;
	}

	.meetFilter-countries>view.long-item {
		width: 100%;
	}

	.item-box {
		display: flex;
		flex-wrap: wrap;
		padding-left: 24upx;
		padding-top: 30upx;
	}

	.leibie-item {
		height: 80upx;
		width: 168upx;
		line-height: 80upx;
		text-align: center;
		background: #e6e6e6;
		font-size: 28upx;
		color: #333333;
		border-radius: 10upx;
		margin-right: 10upx;
		margin-bottom: 10upx;
		overflow: hidden
	}

	.text-box {
		height: 80upx;
		width: 168upx;
		overflow: hidden
	}

	.active2 {
		background: #FFFFFF;
		color: #46CECF;
	}

	.countryitem {
		background: #FFFFFF;
		color: #46CECF;
	}

	.countryitem image {
		width: 44upx;
		height: 36upx;
		position: relative;
		top: -50upx;
		right: -60upx;
	}

	.countryitem2 {
		background: #E6E6E6;
		color: #333333;
	}
</style>
